<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>Microi吾码低代码平台：前端源码的本地运行探索 | 澪贰</title><meta name="author" content="澪贰"><meta name="copyright" content="澪贰"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="ffffff"><meta name="description" content="在开发过程中，本地运行前端源码是非常常见且重要的步骤。它不仅有助于开发人员快速测试和调试代码，还能提高开发效率。本文将通过实际案例详细讲解如何在本地环境中运行前端源码，并讨论一些可能遇到的常见问题和解决方案">
<meta property="og:type" content="article">
<meta property="og:title" content="Microi吾码低代码平台：前端源码的本地运行探索">
<meta property="og:url" content="http://example.com/2024/12/11/Microi%E5%90%BE%E7%A0%81/%E5%89%8D%E7%AB%AF%E6%BA%90%E7%A0%81%E7%9A%84%E6%9C%AC%E5%9C%B0%E8%BF%90%E8%A1%8C%E6%8E%A2%E7%B4%A2/index.html">
<meta property="og:site_name" content="澪贰">
<meta property="og:description" content="在开发过程中，本地运行前端源码是非常常见且重要的步骤。它不仅有助于开发人员快速测试和调试代码，还能提高开发效率。本文将通过实际案例详细讲解如何在本地环境中运行前端源码，并讨论一些可能遇到的常见问题和解决方案">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/e7158f21efdf4c3b6915b2fb628be32.png">
<meta property="article:published_time" content="2024-12-11T05:57:15.000Z">
<meta property="article:modified_time" content="2024-12-18T01:20:50.000Z">
<meta property="article:author" content="澪贰">
<meta property="article:tag" content="开源">
<meta property="article:tag" content="低代码">
<meta property="article:tag" content="vue">
<meta property="article:tag" content="C#">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/e7158f21efdf4c3b6915b2fb628be32.png"><script type="application/ld+json">{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Microi吾码低代码平台：前端源码的本地运行探索",
  "url": "http://example.com/2024/12/11/Microi%E5%90%BE%E7%A0%81/%E5%89%8D%E7%AB%AF%E6%BA%90%E7%A0%81%E7%9A%84%E6%9C%AC%E5%9C%B0%E8%BF%90%E8%A1%8C%E6%8E%A2%E7%B4%A2/",
  "image": "https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/e7158f21efdf4c3b6915b2fb628be32.png",
  "datePublished": "2024-12-11T05:57:15.000Z",
  "dateModified": "2024-12-18T01:20:50.000Z",
  "author": [
    {
      "@type": "Person",
      "name": "澪贰",
      "url": "http://example.com/"
    }
  ]
}</script><link rel="shortcut icon" href="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/cat_icon.ico"><link rel="canonical" href="http://example.com/2024/12/11/Microi%E5%90%BE%E7%A0%81/%E5%89%8D%E7%AB%AF%E6%BA%90%E7%A0%81%E7%9A%84%E6%9C%AC%E5%9C%B0%E8%BF%90%E8%A1%8C%E6%8E%A2%E7%B4%A2/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><script>
    (() => {
      
    const saveToLocal = {
      set: (key, value, ttl) => {
        if (!ttl) return
        const expiry = Date.now() + ttl * 86400000
        localStorage.setItem(key, JSON.stringify({ value, expiry }))
      },
      get: key => {
        const itemStr = localStorage.getItem(key)
        if (!itemStr) return undefined
        const { value, expiry } = JSON.parse(itemStr)
        if (Date.now() > expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return value
      }
    }

    window.btf = {
      saveToLocal,
      getScript: (url, attr = {}) => new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src = url
        script.async = true
        Object.entries(attr).forEach(([key, val]) => script.setAttribute(key, val))
        script.onload = script.onreadystatechange = () => {
          if (!script.readyState || /loaded|complete/.test(script.readyState)) resolve()
        }
        script.onerror = reject
        document.head.appendChild(script)
      }),
      getCSS: (url, id) => new Promise((resolve, reject) => {
        const link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = url
        if (id) link.id = id
        link.onload = link.onreadystatechange = () => {
          if (!link.readyState || /loaded|complete/.test(link.readyState)) resolve()
        }
        link.onerror = reject
        document.head.appendChild(link)
      }),
      addGlobalFn: (key, fn, name = false, parent = window) => {
        if (!true && key.startsWith('pjax')) return
        const globalFn = parent.globalFn || {}
        globalFn[key] = globalFn[key] || {}
        globalFn[key][name || Object.keys(globalFn[key]).length] = fn
        parent.globalFn = globalFn
      }
    }
  
      
      const activateDarkMode = () => {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      const activateLightMode = () => {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', 'ffffff')
        }
      }

      btf.activateDarkMode = activateDarkMode
      btf.activateLightMode = activateLightMode

      const theme = saveToLocal.get('theme')
    
          const hour = new Date().getHours()
          const isNight = hour <= 6 || hour >= 18
          if (theme === undefined) isNight ? activateDarkMode() : activateLightMode()
          else theme === 'light' ? activateLightMode() : activateDarkMode()
        
      
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        document.documentElement.classList.toggle('hide-aside', asideStatus === 'hide')
      }
    
      
    const detectApple = () => {
      if (/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)) {
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
  
    })()
  </script><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":true,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"未找到符合您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  highlight: {"plugin":"highlight.js","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":230,"highlightFullpage":false,"highlightMacStyle":false},
  copy: {
    success: '复制成功',
    error: '复制失败',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: true,
    post: true
  },
  runtime: '天',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":150,"languages":{"author":"作者: 澪贰","link":"链接: ","source":"来源: 澪贰","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'medium_zoom',
  Snackbar: {"chs_to_cht":"已切换为繁体中文","cht_to_chs":"已切换为简体中文","day_to_night":"已切换为深色模式","night_to_day":"已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#1f1f1f","position":"top-right"},
  infinitegrid: {
    js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid/dist/infinitegrid.min.js',
    buttonText: '加载更多'
  },
  isPhotoFigcaption: false,
  islazyloadPlugin: true,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Microi吾码低代码平台：前端源码的本地运行探索',
  isHighlightShrink: false,
  isToc: true,
  pageType: 'post'
}</script><link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'"><script src="https://npm.elemecdn.com/echarts@4.9.0/dist/echarts.min.js"></script><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-double-row-display@1.00/cardlistpost.min.css"/>
<style>#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .tags:before {content:"\A";
  white-space: pre;}#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .tags > .article-meta__separator{display:none}</style>
<link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css"><link rel="stylesheet" href="https://unpkg.zhimg.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css" media="print" onload="this.media='screen'"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 7.3.0"></head><body><div id="web_bg" style="background-image: url(https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/water02.jpg);"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img text-center"><img src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/zero_two.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data text-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">96</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">74</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">9</div></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home-lg"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><span class="site-page group hide"><i class="fa-fw fas fa-list"></i><span> 列表</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-envelope-open"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url(https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/e7158f21efdf4c3b6915b2fb628be32.png);"><nav id="nav"><span id="blog-info"><a class="nav-site-title" href="/"><span class="site-name">澪贰</span></a><a class="nav-page-title" href="/"><span class="site-name">Microi吾码低代码平台：前端源码的本地运行探索</span></a></span><div id="menus"><div id="search-button"><span class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></span></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home-lg"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><span class="site-page group hide"><i class="fa-fw fas fa-list"></i><span> 列表</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-envelope-open"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><span class="site-page"><i class="fas fa-bars fa-fw"></i></span></div></div></nav><div id="post-info"><h1 class="post-title">Microi吾码低代码平台：前端源码的本地运行探索</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2024-12-11T05:57:15.000Z" title="发表于 2024-12-11 13:57:15">2024-12-11</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-12-18T01:20:50.000Z" title="更新于 2024-12-18 09:20:50">2024-12-18</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Microi%E5%90%BE%E7%A0%81/">Microi吾码</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">总字数:</span><span class="word-count">1792</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>5分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title=""><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">浏览量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="container post-content" id="article-container"><div id="post-outdate-notice" data="{&quot;limitDay&quot;:365,&quot;messagePrev&quot;:&quot;It has been&quot;,&quot;messageNext&quot;:&quot;days since the last update, the content of the article may be outdated.&quot;,&quot;postUpdate&quot;:&quot;2024-12-18 09:20:50&quot;}" hidden></div><blockquote>
<p>传送门：<a target="_blank" rel="noopener" href="https://microi.net/">Microi吾码官网</a></p>
</blockquote>
<p><img src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/0204770bc4f8457b927f85f7bf3b902e.jpeg" alt="在这里插入图片描述"></p>
<h1 id="前端源码运行环境要求"><a href="#前端源码运行环境要求" class="headerlink" title="前端源码运行环境要求"></a>前端源码运行环境要求</h1><h2 id="操作系统"><a href="#操作系统" class="headerlink" title="操作系统"></a>操作系统</h2><p>• <code>Windows</code>、<code>macOS</code> 或 <code>Linux</code> 都可以作为开发环境</p>
<p>• 对于某些<code>依赖特定工具链或包的项目</code>，可能有不同的要求，但大多数前端项目都可以<code>跨平台运行</code></p>
<h2 id="必备软件工具"><a href="#必备软件工具" class="headerlink" title="必备软件工具"></a>必备软件工具</h2><p>在开始之前，确保本地环境中已经安装了<code>以下工具</code>：</p>
<p>• <strong>Node.js 和 npm&#x2F;yarn</strong>：<code>Node.js</code> 是前端开发中不可或缺的环境，<code>npm</code> 和 <code>yarn</code> 是常用的<code>包管理工具</code>，可以从 <code>Node.js</code> 官网下载并安装</p>
<p>• <strong>代码编辑器</strong>：如 <code>Visual Studio Code</code>、<code>Sublime Text</code> 或 <code>WebStorm</code>，用于<code>编写和调试代码</code></p>
<p>• <strong>Git</strong>：用于<code>克隆代码库</code>和<code>版本控制</code>，Git 也可以从 <code>Git 官网</code>下载安装</p>
<h2 id="项目源码依赖"><a href="#项目源码依赖" class="headerlink" title="项目源码依赖"></a>项目源码依赖</h2><p>• 项目可能依赖于一些<code>特定版本的库或框架</code>，如 <code>React</code>、<code>Vue</code>、<code>Angular</code> 等，确保提前阅读项目文档，了解是否有其他依赖项</p>
<h1 id="从Git仓库克隆前端源码"><a href="#从Git仓库克隆前端源码" class="headerlink" title="从Git仓库克隆前端源码"></a>从Git仓库克隆前端源码</h1><ol>
<li><p>打开<code>终端（Terminal）</code>，选择合适的工作目录</p>
</li>
<li><p>使用 <code>git clone 命令</code>将项目源码克隆到<code>本地</code>：</p>
</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git <span class="built_in">clone</span> https://github.com/your-repository-name/project-name.git</span><br><span class="line"><span class="built_in">cd</span> project-name</span><br></pre></td></tr></table></figure>
<p>这里的 <code>your-repository-name/project-name</code> 替换成实际的Git仓库地址</p>
<h1 id="安装项目依赖"><a href="#安装项目依赖" class="headerlink" title="安装项目依赖"></a>安装项目依赖</h1><p>大部分前端项目都会使用 <code>package.json</code> 文件来管理项目依赖。依赖包的<code>安装过程</code>如下：</p>
<ol>
<li>使用 <code>npm</code> 或 <code>yarn</code> 安装依赖包：</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install</span><br></pre></td></tr></table></figure>
<p>或者如果你<code>偏好使用 yarn</code>：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn install</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>等待依赖包下载完成。这个过程可能<code>需要一些时间</code>，具体取决于项目的大小和网络速度</li>
</ol>
<h1 id="启动本地开发服务器"><a href="#启动本地开发服务器" class="headerlink" title="启动本地开发服务器"></a>启动本地开发服务器</h1><p>前端项目一般会有一个<code>本地开发服务器</code>，用于实时查看代码变化。大多数项目使用 <code>webpack-dev-server</code>、<code>Vite</code> 或其他开发服务器来实现这一点。启动开发服务器的命令通常会写在 <code>package.json</code> 的 <code>scripts</code> 字段下。常见的命令如下：</p>
<p>💻使用 npm 启动服务器</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm start</span><br></pre></td></tr></table></figure>
<p>💻使用 yarn 启动服务器</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn start</span><br></pre></td></tr></table></figure>
<p>通常，运行后你可以在浏览器中访问 <code>http://localhost:3000</code>（或项目文档中提供的其他端口号），查看项目运行效果</p>
<h1 id="常见问题与解决方案"><a href="#常见问题与解决方案" class="headerlink" title="常见问题与解决方案"></a>常见问题与解决方案</h1><h2 id="依赖安装失败"><a href="#依赖安装失败" class="headerlink" title="依赖安装失败"></a>依赖安装失败</h2><p>在安装依赖时，常常会遇到一些<code>安装失败的情况</code>，常见原因包括：</p>
<p>• <strong>网络问题</strong>：在国内使用 <code>npm</code> 时，可能会因为网络原因导致依赖下载失败。此时可以使用<code>淘宝镜像源</code>来加速依赖安装</p>
<p>⌨️使用 <code>npm</code> 时，可以运行以下命令：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm config <span class="built_in">set</span> registry https://registry.npm.taobao.org</span><br></pre></td></tr></table></figure>
<p>⌨️如果使用 <code>yarn</code>，执行：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn config <span class="built_in">set</span> registry https://registry.npm.taobao.org</span><br></pre></td></tr></table></figure>
<p>• <strong>依赖版本问题</strong>：有时候，项目依赖的某些包版本与当前<code>环境不兼容</code>。此时，可以尝试<code>删除 node_modules 目录</code>和 <code>package-lock.json 文件</code>，重新安装依赖</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">rm</span> -rf node_modules</span><br><span class="line"><span class="built_in">rm</span> package-lock.json</span><br><span class="line">npm install</span><br></pre></td></tr></table></figure>

<h2 id="端口冲突"><a href="#端口冲突" class="headerlink" title="端口冲突"></a>端口冲突</h2><p>如果在启动本地服务器时遇到<code>端口冲突</code>，可以尝试<code>更改项目的端口配置</code>。许多前端工具如 <code>webpack-dev-server</code> 和 <code>Vite</code> 都允许在配置文件中<code>指定不同的端口</code>。例如，在 <code>webpack</code> 配置中，可以<code>修改 devServer.port</code>：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">devServer: &#123;</span><br><span class="line">  port: 8081,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="代码更新未生效"><a href="#代码更新未生效" class="headerlink" title="代码更新未生效"></a>代码更新未生效</h2><p>当你修改代码后，浏览器中的更新没有即时显示，可以尝试以下方法：</p>
<p>• <strong>清空浏览器缓存</strong>：浏览器有时会<code>缓存旧的代码</code>，导致<code>新的修改不生效</code>。可以尝试<code>清空缓存</code>或<code>打开无痕模式</code></p>
<p>• <strong>检查热重载是否正常工作</strong>：大多数现代前端工具都<code>支持热重载</code>（Hot Module Replacement，HMR）。如果热重载<code>未能正常工作</code>，检查<code>开发服务器的配置文件</code></p>
<h1 id="提升本地开发体验的技巧"><a href="#提升本地开发体验的技巧" class="headerlink" title="提升本地开发体验的技巧"></a>提升本地开发体验的技巧</h1><h2 id="使用代理解决跨域问题"><a href="#使用代理解决跨域问题" class="headerlink" title="使用代理解决跨域问题"></a>使用代理解决跨域问题</h2><p>在开发过程中，前端和后端通常是分开的，跨域问题可能会导致<code>接口请求失败</code>。可以通过<code>配置开发服务器的代理</code>来绕过跨域问题。例如，<code>webpack-dev-server</code> 支持设置代理，将请求<code>转发到后端服务器</code>：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">devServer: &#123;</span><br><span class="line">  proxy: &#123;</span><br><span class="line">    <span class="string">&#x27;/api&#x27;</span>: <span class="string">&#x27;http://localhost:5000&#x27;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="集成热重载与自动刷新"><a href="#集成热重载与自动刷新" class="headerlink" title="集成热重载与自动刷新"></a>集成热重载与自动刷新</h2><p>大多数现代开发框架都支持<code>热重载（HMR）</code>和<code>自动刷新</code>功能。当你修改文件时，浏览器会<code>自动刷新并显示最新内容</code>。为了<code>避免手动刷新</code>，可以确保在 <code>webpack</code> 或 <code>Vite</code> 配置中启用这些功能</p>
<h2 id="使用开发工具增强调试"><a href="#使用开发工具增强调试" class="headerlink" title="使用开发工具增强调试"></a>使用开发工具增强调试</h2><p>• <strong>浏览器开发者工具</strong>：浏览器自带的开发者工具（如 <code>Chrome DevTools</code>）能帮助你<code>调试 JavaScript 代码</code>、<code>查看网络请求</code>、<code>分析页面性能</code>等</p>
<p>• <strong>React DevTools&#x2F;Vue DevTools</strong>：对于使用 <code>React</code>或 <code>Vue</code> 的项目，安装相关的开发者工具扩展（如 <code>React DevTools</code>）可以帮助你<code>调试组件的状态和生命周期</code></p>
<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p><strong>运行界面源码</strong>：<br>🚩<strong>运行PC端vue2传统界面源码</strong></p>
<ol>
<li>在欢迎页打开Microi吾码开源版<code>【/microi.vue2.pc/】</code>文件夹</li>
<li>查看<code>【/microi.vue2.pc/说明.txt】</code>文件，执行几条<code>npm</code>常规命令后即可跑起来</li>
</ol>
<blockquote>
<p>传送门：<a target="_blank" rel="noopener" href="https://www.nbweixin.cn/autopage/">Vue2传统界面试用地址（可操作数据）</a></p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#nvm use 14【注意一定需要14】</span></span><br><span class="line"><span class="comment">#nrm use taobao</span></span><br><span class="line"><span class="comment">#npm install</span></span><br><span class="line"><span class="comment">#npm run dev</span></span><br><span class="line"></span><br><span class="line">可能会出现的问题：</span><br><span class="line">1、报错：/node_modules/_monaco-editor@0.33.0@monaco-editor/esm/vs/basic-languages/_.contribution.js</span><br><span class="line">    解决：</span><br><span class="line">    将以下5个变量（在30多行代码左右）从LazyLanguageLoader内部移动到之上，使用var声明即可。</span><br><span class="line">    var _languageId;</span><br><span class="line">    var _loadingTriggered;</span><br><span class="line">    var _lazyLoadPromise;</span><br><span class="line">    var _lazyLoadPromiseResolve;</span><br><span class="line">    var _lazyLoadPromiseReject;</span><br><span class="line">    var LazyLanguageLoader = class &#123; ......</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>🚩<strong>运行PC端vue3仿webos操作系统界面（编译版）</strong></p>
<ol>
<li>进入<code>【/microi.vue3.os.build/】</code>文件夹</li>
<li>执行命令<code>#http-server</code>即可跑起来</li>
</ol>
<p>🚩<strong>运行PC端vue3仿webos操作系统界面源码（个人版）</strong></p>
<ol>
<li>在欢迎页打开Microi吾码个人版<code>【/microi.vue3.os/】</code>文件夹</li>
<li>查看<code>【/microi.vue3.os/说明.txt】</code>文件，执行几条<code>npm</code>常规命令后即可跑起来</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#nvm use 18【建议使用18，与我们开发团队node版本一致】</span></span><br><span class="line"><span class="comment">#nrm use taobao</span></span><br><span class="line"><span class="comment">#npm install</span></span><br><span class="line"><span class="comment">#npm run dev</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="🚩运行移动端vue3-uniapp源码（基于图鸟UI）1-进入【-microi-vue3-tuniao-】文件夹2-执行-npm-install后，使用小程序调试工具即可打开"><a href="#🚩运行移动端vue3-uniapp源码（基于图鸟UI）1-进入【-microi-vue3-tuniao-】文件夹2-执行-npm-install后，使用小程序调试工具即可打开" class="headerlink" title="🚩运行移动端vue3 uniapp源码（基于图鸟UI）1. 进入【/microi.vue3.tuniao/】文件夹2. 执行#npm install后，使用小程序调试工具即可打开"></a>🚩<strong>运行移动端vue3 uniapp源码（基于图鸟UI）</strong><br>1. 进入<code>【/microi.vue3.tuniao/】</code>文件夹<br>2. 执行<code>#npm install</code>后，使用小程序调试工具即可打开</h2><p>在本地运行前端源码的过程相对简单，但成功的关键在于环境的配置与依赖的管理。通过<code>正确安装依赖</code>、<code>启动开发服务器</code>，<code>并了解如何解决常见问题</code>，你将能够顺利运行前端项目并进行高效开发。希望本文能帮助你顺利完成本地开发环境的搭建和调试。如果遇到任何问题，及时参考相关文档或开发者社区，通常都能找到解决方案</p>
<p>希望以上 <strong>Microi吾码低代码平台：前端源码的本地运行探索</strong> 能对你前端运行有帮助，在该平台上更流畅的运行(´▽&#96;ʃ♡ƪ)</p>
<h1 id="希望读者们多多三连支持"><a href="#希望读者们多多三连支持" class="headerlink" title="希望读者们多多三连支持"></a>希望读者们多多三连支持</h1><h1 id="小编会继续更新"><a href="#小编会继续更新" class="headerlink" title="小编会继续更新"></a>小编会继续更新</h1><h1 id="你们的鼓励就是我前进的动力！"><a href="#你们的鼓励就是我前进的动力！" class="headerlink" title="你们的鼓励就是我前进的动力！"></a>你们的鼓励就是我前进的动力！</h1><p><img src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/e5c9288a0caa4ecc90e768d1bf18defa.jpeg" alt="请添加图片描述"></p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="http://example.com">澪贰</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="http://example.com/2024/12/11/Microi%E5%90%BE%E7%A0%81/%E5%89%8D%E7%AB%AF%E6%BA%90%E7%A0%81%E7%9A%84%E6%9C%AC%E5%9C%B0%E8%BF%90%E8%A1%8C%E6%8E%A2%E7%B4%A2/">http://example.com/2024/12/11/Microi吾码/前端源码的本地运行探索/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来源 <a href="http://example.com" target="_blank">澪贰</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%BC%80%E6%BA%90/">开源</a><a class="post-meta__tags" href="/tags/%E4%BD%8E%E4%BB%A3%E7%A0%81/">低代码</a><a class="post-meta__tags" href="/tags/vue/">vue</a><a class="post-meta__tags" href="/tags/C/">C#</a></div><div class="post-share"><div class="social-share" data-image="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/e7158f21efdf4c3b6915b2fb628be32.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i>赞助</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/Wechat.png" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/Wechat.png" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/Alipay.png" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/Alipay.png" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></div><nav class="pagination-post" id="pagination"><a class="pagination-related" href="/2024/12/15/CPP%E5%88%9D%E9%98%B6/%E7%B1%BB%E5%92%8C%E5%AF%B9%E8%B1%A1%EF%BC%88%E4%B8%8B%EF%BC%89/" title="C++天使的灵动心跳代码：类和对象（下）"><img class="cover" src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241215001859.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="info"><div class="info-1"><div class="info-item-1">上一篇</div><div class="info-item-2">C++天使的灵动心跳代码：类和对象（下）</div></div><div class="info-2"><div class="info-item-1">构造函数补充构造函数赋值一般把成员变量放在私有，通常只是声明或给了缺省值，所以要给他们定义 直接赋值直接给个直观的例子，之前也使用过 1234567891011121314class Date&#123;public:	 Date(int year, int month, int day)	 &#123;		 _year = year;		 _month = month;		 _day = day;	 &#125;private:	 int _year;	 int _month;	 int _day;&#125;; 虽然上述构造函数调用之后，对象中已经有了一个初始值，但是不能将其称为对对象中成员变量的初始化，构造函数体中的语句只能将其称为赋初值，而不能称作初始化。因为初始化只能初始化一次，而构造函数体内可以多次赋值 初始化列表什么是初始化列表？  以一个冒号开始，接着是一个以逗号分隔的数据成员列表，每个”成员变量”后面跟一个放在括号中的初始值或表达式  举个例子： 1234567891011121314class Date&#123;	public:		Date(int...</div></div></div></a><a class="pagination-related" href="/2024/12/09/CPP%E5%88%9D%E9%98%B6/%E7%B1%BB%E5%92%8C%E5%AF%B9%E8%B1%A1%EF%BC%88%E4%B8%AD%E4%B8%8B%EF%BC%89/" title="C++天使的灵动心跳代码：类和对象（中下）"><img class="cover" src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/88d81efa3478b347de2bfe395a1840f.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="info text-right"><div class="info-1"><div class="info-item-1">下一篇</div><div class="info-item-2">C++天使的灵动心跳代码：类和对象（中下）</div></div><div class="info-2"><div class="info-item-1">拷贝构造函数 拷贝构造函数是一种特殊的构造函数，它用于创建一个新对象，这个新对象是另一个同类型对象的副本，只有单个形参，该形参是对本类类型对象的引用(一般常用 const 修饰)，在用已存在的类类型对象创建新对象时由编译器自动调用  其语法形式为： 12类名 (const 类名&amp; 对象名) &#123;&#125; 🤔为什么一定要引用传参呢？  当实参把对象传给形参的时候，如果不使用引用传参，那就是一个传值的过程，那么传值的时候要把实参传给一个中间变量，然后再由中间变量传给形参，这中间又涉及了对象的拷贝，然后以此类推，又要传值，又要拷贝，所以使用传值方式编译器直接报错，因为会引发无穷递归调用  🔥值得注意的是：  已存在的对象初始化一个新对象时叫做拷贝，已存在的对象初始化一个已存在的对象时叫做赋值 const...</div></div></div></a></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><a class="pagination-related" href="/2024/12/04/Microi%E5%90%BE%E7%A0%81/%E9%AB%98%E6%95%88%E4%BE%BF%E6%8D%B7%E7%9A%84%E7%94%9F%E6%88%90%E4%B8%8E%E7%AE%A1%E7%90%86%E5%85%A8%E8%83%BD%E5%8A%A9%E6%89%8B/" title="Microi吾码低代码平台：高效便捷的生成与管理全能助手"><img class="cover" src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/f3468e45138f36eace1e160f6bfb5a9.png" alt="cover"><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2024-12-04</div><div class="info-item-2">Microi吾码低代码平台：高效便捷的生成与管理全能助手</div></div><div class="info-2"><div class="info-item-1">什么是 Microi 吾码？Microi 吾码是一个专为开发者设计的代码编辑平台，专注于提升开发者的编码效率和工作体验。它以简洁的设计和强大的功能著称，为开发者提供了一个高效、灵活且高度可定制的编程环境  核心理念 Microi 吾码的设计初衷是平衡轻量与强大，让用户无需庞大的集成开发环境（IDE），也能享受到快速、流畅的编码体验。它适用于从日常脚本编写到大型项目开发的各种场景  功能亮点 🚩多语言支持 • Microi 吾码支持多种主流编程语言，如 Python、Java、JavaScript、C++、Go、Ruby 等• 提供语法高亮、代码补全、错误提示、重构等实用功能，帮助开发者更高效地编写代码 🚩轻量级但功能全面 • Microi 吾码启动速度快，占用内存少，但提供了类似 IDE 的功能，如调试工具、终端集成、任务管理等• 特别适合需要在性能有限的设备上编程的用户 🚩插件生态系统 • Microi 吾码内置插件市场，用户可以按需安装插件，扩展功能，比如代码片段管理器、Git 版本控制、数据库工具等• 开发者还能根据需求自行开发插件 🚩多平台支持 • 无论是...</div></div></div></a></div></div><hr class="custom-hr"/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info text-center"><div class="card-info-avatar"><div class="avatar-img"><img src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/zero_two.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-status-box"><div class="author-status"><g-emoji class="g-emoji" alias="palm_tree" fallback-src="https://lskypro.acozycotage.net/LightPicture/2022/12/fe1dc0402e623096.jpg">🤯</g-emoji><span>头脑风暴中</span></div></div></div><div class="author-info-name">澪贰</div><div class="author-info-description"></div><div class="site-data"><a href="/archives/"><div class="headline">文章</div><div class="length-num">96</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">74</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">9</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/ZeroCoder-Zhang"><i></i><span>🛫下一站--github</span></a><div class="card-info-social-icons"><a class="social-icon" href="https://github.com/ZeroCoder-Zhang" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:1478943685@qq.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"><center><b>--- 主域名 ---<br><a target="_blank" rel="noopener" href="https://general.zzh-blog.club/" title="主域名链接" class="anno_content"><font color="#5ea6e5">general.zzh-blog.club</font></a></b></center><center><b>--- 推广学习交流(Wechat) ---<br><a target="_blank" rel="noopener" href="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/微信扫码加好友.png" title="微信图片" class="anno_content"><font color="#5ea6e5">zzh1478943685(备注来意)</font></a></b></center></div><div id="welcome-info"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E6%BA%90%E7%A0%81%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E8%A6%81%E6%B1%82"><span class="toc-number">1.</span> <span class="toc-text">前端源码运行环境要求</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F"><span class="toc-number">1.1.</span> <span class="toc-text">操作系统</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BF%85%E5%A4%87%E8%BD%AF%E4%BB%B6%E5%B7%A5%E5%85%B7"><span class="toc-number">1.2.</span> <span class="toc-text">必备软件工具</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B9%E7%9B%AE%E6%BA%90%E7%A0%81%E4%BE%9D%E8%B5%96"><span class="toc-number">1.3.</span> <span class="toc-text">项目源码依赖</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BB%8EGit%E4%BB%93%E5%BA%93%E5%85%8B%E9%9A%86%E5%89%8D%E7%AB%AF%E6%BA%90%E7%A0%81"><span class="toc-number">2.</span> <span class="toc-text">从Git仓库克隆前端源码</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E9%A1%B9%E7%9B%AE%E4%BE%9D%E8%B5%96"><span class="toc-number">3.</span> <span class="toc-text">安装项目依赖</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%90%AF%E5%8A%A8%E6%9C%AC%E5%9C%B0%E5%BC%80%E5%8F%91%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="toc-number">4.</span> <span class="toc-text">启动本地开发服务器</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E4%B8%8E%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="toc-number">5.</span> <span class="toc-text">常见问题与解决方案</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BE%9D%E8%B5%96%E5%AE%89%E8%A3%85%E5%A4%B1%E8%B4%A5"><span class="toc-number">5.1.</span> <span class="toc-text">依赖安装失败</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AB%AF%E5%8F%A3%E5%86%B2%E7%AA%81"><span class="toc-number">5.2.</span> <span class="toc-text">端口冲突</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81%E6%9B%B4%E6%96%B0%E6%9C%AA%E7%94%9F%E6%95%88"><span class="toc-number">5.3.</span> <span class="toc-text">代码更新未生效</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%8F%90%E5%8D%87%E6%9C%AC%E5%9C%B0%E5%BC%80%E5%8F%91%E4%BD%93%E9%AA%8C%E7%9A%84%E6%8A%80%E5%B7%A7"><span class="toc-number">6.</span> <span class="toc-text">提升本地开发体验的技巧</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E4%BB%A3%E7%90%86%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98"><span class="toc-number">6.1.</span> <span class="toc-text">使用代理解决跨域问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9B%86%E6%88%90%E7%83%AD%E9%87%8D%E8%BD%BD%E4%B8%8E%E8%87%AA%E5%8A%A8%E5%88%B7%E6%96%B0"><span class="toc-number">6.2.</span> <span class="toc-text">集成热重载与自动刷新</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7%E5%A2%9E%E5%BC%BA%E8%B0%83%E8%AF%95"><span class="toc-number">6.3.</span> <span class="toc-text">使用开发工具增强调试</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-number">7.</span> <span class="toc-text">总结</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%F0%9F%9A%A9%E8%BF%90%E8%A1%8C%E7%A7%BB%E5%8A%A8%E7%AB%AFvue3-uniapp%E6%BA%90%E7%A0%81%EF%BC%88%E5%9F%BA%E4%BA%8E%E5%9B%BE%E9%B8%9FUI%EF%BC%891-%E8%BF%9B%E5%85%A5%E3%80%90-microi-vue3-tuniao-%E3%80%91%E6%96%87%E4%BB%B6%E5%A4%B92-%E6%89%A7%E8%A1%8C-npm-install%E5%90%8E%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%B0%83%E8%AF%95%E5%B7%A5%E5%85%B7%E5%8D%B3%E5%8F%AF%E6%89%93%E5%BC%80"><span class="toc-number">7.1.</span> <span class="toc-text">🚩运行移动端vue3 uniapp源码（基于图鸟UI）1. 进入【&#x2F;microi.vue3.tuniao&#x2F;】文件夹2. 执行#npm install后，使用小程序调试工具即可打开</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B8%8C%E6%9C%9B%E8%AF%BB%E8%80%85%E4%BB%AC%E5%A4%9A%E5%A4%9A%E4%B8%89%E8%BF%9E%E6%94%AF%E6%8C%81"><span class="toc-number">8.</span> <span class="toc-text">希望读者们多多三连支持</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B0%8F%E7%BC%96%E4%BC%9A%E7%BB%A7%E7%BB%AD%E6%9B%B4%E6%96%B0"><span class="toc-number">9.</span> <span class="toc-text">小编会继续更新</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BD%A0%E4%BB%AC%E7%9A%84%E9%BC%93%E5%8A%B1%E5%B0%B1%E6%98%AF%E6%88%91%E5%89%8D%E8%BF%9B%E7%9A%84%E5%8A%A8%E5%8A%9B%EF%BC%81"><span class="toc-number">10.</span> <span class="toc-text">你们的鼓励就是我前进的动力！</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2025/07/28/Linux/Linux%E7%8E%AF%E5%A2%83%E5%9F%BA%E7%A1%80%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7%E4%BD%BF%E7%94%A8/" title="【Linux操作系统】简学深悟启示录：Linux环境基础开发工具使用"><img src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250728114434.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【Linux操作系统】简学深悟启示录：Linux环境基础开发工具使用"/></a><div class="content"><a class="title" href="/2025/07/28/Linux/Linux%E7%8E%AF%E5%A2%83%E5%9F%BA%E7%A1%80%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7%E4%BD%BF%E7%94%A8/" title="【Linux操作系统】简学深悟启示录：Linux环境基础开发工具使用">【Linux操作系统】简学深悟启示录：Linux环境基础开发工具使用</a><time datetime="2025-07-28T13:41:39.000Z" title="发表于 2025-07-28 21:41:39">2025-07-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2025/07/14/Linux/Linux%E6%9D%83%E9%99%90/" title="【Linux操作系统】简学深悟启示录：Linux权限"><img src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250713233449.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【Linux操作系统】简学深悟启示录：Linux权限"/></a><div class="content"><a class="title" href="/2025/07/14/Linux/Linux%E6%9D%83%E9%99%90/" title="【Linux操作系统】简学深悟启示录：Linux权限">【Linux操作系统】简学深悟启示录：Linux权限</a><time datetime="2025-07-13T22:00:00.000Z" title="发表于 2025-07-14 06:00:00">2025-07-14</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2025/07/07/Linux/Linux%E5%9F%BA%E6%9C%AC%E6%8C%87%E4%BB%A4/" title="【Linux操作系统】简学深悟启示录：Linux基本指令"><img src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250705182234.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【Linux操作系统】简学深悟启示录：Linux基本指令"/></a><div class="content"><a class="title" href="/2025/07/07/Linux/Linux%E5%9F%BA%E6%9C%AC%E6%8C%87%E4%BB%A4/" title="【Linux操作系统】简学深悟启示录：Linux基本指令">【Linux操作系统】简学深悟启示录：Linux基本指令</a><time datetime="2025-07-07T12:31:51.000Z" title="发表于 2025-07-07 20:31:51">2025-07-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2025/06/23/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/css%EF%BC%88%E4%B8%8B%EF%BC%89/" title="【前端基础】层叠宇宙的代码旅人：css（下）"><img src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250608235413.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【前端基础】层叠宇宙的代码旅人：css（下）"/></a><div class="content"><a class="title" href="/2025/06/23/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/css%EF%BC%88%E4%B8%8B%EF%BC%89/" title="【前端基础】层叠宇宙的代码旅人：css（下）">【前端基础】层叠宇宙的代码旅人：css（下）</a><time datetime="2025-06-23T07:47:50.000Z" title="发表于 2025-06-23 15:47:50">2025-06-23</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2025/06/23/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/css%EF%BC%88%E4%B8%AD%EF%BC%89/" title="【前端基础】层叠宇宙的代码旅人：css（中）"><img src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/909e58aa338befce9e0b2e4e683d50c.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【前端基础】层叠宇宙的代码旅人：css（中）"/></a><div class="content"><a class="title" href="/2025/06/23/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/css%EF%BC%88%E4%B8%AD%EF%BC%89/" title="【前端基础】层叠宇宙的代码旅人：css（中）">【前端基础】层叠宇宙的代码旅人：css（中）</a><time datetime="2025-06-23T07:44:20.000Z" title="发表于 2025-06-23 15:44:20">2025-06-23</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2024 - 2025 By 澪贰</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo 7.3.0</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly 5.3.5</a></div><div class="footer_custom_text">🏃‍➡️不是遇到同行伙伴再出发，而是出发后的路上遇到志同道合的人。<p></a>&nbsp;<a target="_blank" href="https://www.jsdelivr.com/"><img src= "" data-lazy-src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用JsDelivr为静态资源提供CDN加速"></a> &nbsp;<a target="_blank" href="https://vercel.com/ "><img src= "" data-lazy-src="https://img.shields.io/badge/Hosted-Vervel-brightgreen?style=flat&logo=Vercel" title="本站采用双线部署，默认线路托管于Vercel"></a>&nbsp;<a target="_blank" href="https://vercel.com/ "><img src= "" data-lazy-src="https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio" title="本站采用双线部署，联通线路托管于Coding"></a>&nbsp;<a target="_blank" href="https://github.com/"><img src= "" data-lazy-src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title="本站项目由Gtihub托管"></a>&nbsp;<a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img src= "" data-lazy-src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"></a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="日间和夜间模式切换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="前往评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"><span id="percent">0</span><span>%</span></i></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><div class="js-pjax"><script>(() => {
  const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
  const option = null

  const getCount = () => {
    const countELement = document.getElementById('twikoo-count')
    if(!countELement) return
    twikoo.getCommentsCount({
      envId: 'https://twikoo.zzh-blog.club/',
      region: '',
      urls: [window.location.pathname],
      includeReply: false
    }).then(res => {
      countELement.textContent = res[0].count
    }).catch(err => {
      console.error(err)
    })
  }

  const init = (el = document, path = location.pathname) => {
    twikoo.init({
      el: el.querySelector('#twikoo-wrap'),
      envId: 'https://twikoo.zzh-blog.club/',
      region: '',
        placeholder: "|´・ω・)ノ嘿~都看到这儿了\n确定不评论一下再走嘛？\n(点完发送按钮等几秒哦~)",
        nicknamePlaceholder: "昵称/笔名",
        emailPlaceholder: "邮箱（不会公开）",
        urlPlaceholder: "个人站点",
      onCommentLoaded: () => {
        btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
      },
      ...option,
      path: isShuoshuo ? path : (option && option.path) || path
    })

    

    isShuoshuo && (window.shuoshuoComment.destroyTwikoo = () => {
      if (el.children.length) {
        el.innerHTML = ''
        el.classList.add('no-comment')
      }
    })
  }

  const loadTwikoo = (el, path) => {
    if (typeof twikoo === 'object') setTimeout(() => init(el, path), 0)
    else btf.getScript('https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js').then(() => init(el, path))
  }

  if (isShuoshuo) {
    'Twikoo' === 'Twikoo'
      ? window.shuoshuoComment = { loadComment: loadTwikoo }
      : window.loadOtherComment = loadTwikoo
    return
  }

  if ('Twikoo' === 'Twikoo' || !true) {
    if (true) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
    else loadTwikoo()
  } else {
    window.loadOtherComment = loadTwikoo
  }
})()</script></div><script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script><script defer data-pjax src="/js/cat.js"></script><canvas id="universe"></canvas><script defer src="/js/universe.js"></script><script async src="/js/title.js"></script><script async src="//npm.elemecdn.com/pace-js@1.2.4/pace.min.js"></script><script defer data-pjax src="/js/readPercent.js"></script><div class="aplayer no-destroy" data-id="8459282733" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-listmaxheight=400px data-order="random"> </div><script src="https://cdn.staticfile.org/jquery/3.6.3/jquery.min.js"></script><script async data-pjax src="/js/txmap.js"></script><script src="source/js/统计图颜色适配.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = false;
POWERMODE.mobile = true;
document.body.addEventListener('input', POWERMODE);
</script><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/click-heart.min.js" async="async" mobile="true"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/metingjs/dist/Meting.min.js"></script><script>(() => {
  const destroyAplayer = () => {
    if (window.aplayers) {
      for (let i = 0; i < window.aplayers.length; i++) {
        if (!window.aplayers[i].options.fixed) {
          window.aplayers[i].destroy()
        }
      }
    }
  }

  const runMetingJS = () => {
    typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()
  }

  btf.addGlobalFn('pjaxSend', destroyAplayer, 'destroyAplayer')
  btf.addGlobalFn('pjaxComplete', loadMeting, 'runMetingJS')
})()</script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>(() => {
  const pjaxSelectors = ["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"]

  window.pjax = new Pjax({
    elements: 'a:not([target="_blank"])',
    selectors: pjaxSelectors,
    cacheBust: false,
    analytics: false,
    scrollRestoration: false
  })

  const triggerPjaxFn = (val) => {
    if (!val) return
    Object.values(val).forEach(fn => fn())
  }

  document.addEventListener('pjax:send', () => {
    // removeEventListener
    btf.removeGlobalFnEvent('pjaxSendOnce')
    btf.removeGlobalFnEvent('themeChange')

    // reset readmode
    const $bodyClassList = document.body.classList
    if ($bodyClassList.contains('read-mode')) $bodyClassList.remove('read-mode')

    triggerPjaxFn(window.globalFn.pjaxSend)
  })

  document.addEventListener('pjax:complete', () => {
    btf.removeGlobalFnEvent('pjaxCompleteOnce')
    document.querySelectorAll('script[data-pjax]').forEach(item => {
      const newScript = document.createElement('script')
      const content = item.text || item.textContent || item.innerHTML || ""
      Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
      newScript.appendChild(document.createTextNode(content))
      item.parentNode.replaceChild(newScript, item)
    })

    triggerPjaxFn(window.globalFn.pjaxComplete)
  })

  document.addEventListener('pjax:error', e => {
    if (e.request.status === 404) {
      const usePjax = true
      true 
        ? (usePjax ? pjax.loadUrl('/404.html') : window.location.href = '/404.html')
        : window.location.href = e.request.responseURL
    }
  })
})()</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="text-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="输入你想搜索的关键字" type="text"/></div></div><hr/><div id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div></div><!-- hexo injector body_end start --><script data-pjax>
    function butterfly_categories_card_injector_config(){
      var parent_div_git = document.getElementById('recent-posts');
      var item_html = '<style>li.categoryBar-list-item{width:24%;}.categoryBar-list{max-height: 380px;overflow:auto;}.categoryBar-list::-webkit-scrollbar{width:0!important}@media screen and (max-width: 650px){.categoryBar-list{max-height: 320px;}}</style><div class="recent-post-item" style="height:auto;width:100%;padding:0px;"><div id="categoryBar"><ul class="categoryBar-list"><li class="categoryBar-list-item" style="background:url(https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250710163139.png);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/Linux/&quot;);" href="javascript:void(0);">Linux</a><span class="categoryBar-list-count">3</span><span class="categoryBar-list-descr">C++笔记</span></li><li class="categoryBar-list-item" style="background:url(https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250710163140.png);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/C-初阶/&quot;);" href="javascript:void(0);">C++初阶</a><span class="categoryBar-list-count">19</span><span class="categoryBar-list-descr">C语言笔记</span></li><li class="categoryBar-list-item" style="background:url(https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_202507101631401.png);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/C语言/&quot;);" href="javascript:void(0);">C语言</a><span class="categoryBar-list-count">22</span><span class="categoryBar-list-descr">Linux笔记</span></li><li class="categoryBar-list-item" style="background:url(https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250710163130.png);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/Microi吾码/&quot;);" href="javascript:void(0);">Microi吾码</a><span class="categoryBar-list-count">2</span><span class="categoryBar-list-descr">C++笔记</span></li><li class="categoryBar-list-item" style="background:url(https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250710163135.png);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/C-进阶/&quot;);" href="javascript:void(0);">C++进阶</a><span class="categoryBar-list-count">19</span><span class="categoryBar-list-descr">低代码</span></li><li class="categoryBar-list-item" style="background:url(https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250710163137.png);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/优选算法/&quot;);" href="javascript:void(0);">优选算法</a><span class="categoryBar-list-count">11</span><span class="categoryBar-list-descr">数据结构笔记</span></li><li class="categoryBar-list-item" style="background:url(https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250710163136.png);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/前端基础/&quot;);" href="javascript:void(0);">前端基础</a><span class="categoryBar-list-count">5</span><span class="categoryBar-list-descr">入门常用算法</span></li><li class="categoryBar-list-item" style="background:url(https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250710163132.png);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/话题/&quot;);" href="javascript:void(0);">话题</a><span class="categoryBar-list-count">5</span><span class="categoryBar-list-descr">前端基础笔记</span></li><li class="categoryBar-list-item" style="background:url(https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250710163134.png);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/初阶数据结构/&quot;);" href="javascript:void(0);">初阶数据结构</a><span class="categoryBar-list-count">10</span><span class="categoryBar-list-descr">杂谈</span></li></ul></div></div>';
      console.log('已挂载butterfly_categories_card')
      parent_div_git.insertAdjacentHTML("afterbegin",item_html)
      }
    if( document.getElementById('recent-posts') && (location.pathname ==='/'|| '/' ==='all')){
    butterfly_categories_card_injector_config()
    }
  </script><script data-pjax>
  function butterfly_footer_beautify_injector_config(){
    var parent_div_git = document.getElementById('footer-wrap');
    var item_html = '<div id="workboard"></div><p id="ghbdages"><a class="github-badge" target="_blank" href="https://hexo.io/" style="margin-inline:5px" data-title="博客框架为Hexo" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&amp;logo=hexo" alt=""/></a><a class="github-badge" target="_blank" href="https://butterfly.js.org/" style="margin-inline:5px" data-title="主题使用Butterfly" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&amp;logo=bitdefender" alt=""/></a></p>';
    console.log('已挂载butterfly_footer_beautify')
    parent_div_git.insertAdjacentHTML("beforeend",item_html)
    }
  var elist = 'null'.split(',');
  var cpage = location.pathname;
  var epage = 'all';
  var flag = 0;

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_footer_beautify_injector_config();
  }
  else if (epage === cpage){
    butterfly_footer_beautify_injector_config();
  }
  </script><script async src="https://unpkg.zhimg.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.min.js"></script><script data-pjax>
  function butterfly_swiper_injector_config(){
    var parent_div_git = document.getElementById('recent-posts');
    var item_html = '<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;2025/02/28/话题/DeepSeek、Grok 和 ChatGPT 对比分析/&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/77c5921463a44f418828ae47de6671e5.webp" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2025-02-28</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;2025/02/28/话题/DeepSeek、Grok 和 ChatGPT 对比分析/&quot;);" href="javascript:void(0);" alt="">DeepSeek、Grok 和 ChatGPT 对比分析：从技术与应用场景的角度深入探讨</a><div class="blog-slider__text">在人工智能领域，随着技术的快速发展，不同的工具和框架不断涌现，为开发者提供了更多选择。DeepSeek、Grok 和 ChatGPT 作为三款备受关注的工具，每一款都有其独特的优势和适用场景。本文将从技术特点、应用场景以及实际案例分析的角度，对这三款工具进行对比，帮助读者更好地理解它们的区别和适用场景</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;2025/02/28/话题/DeepSeek、Grok 和 ChatGPT 对比分析/&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;2025/02/20/话题/C++方向后端开发学习指南/&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/44fa280c73e53024f749363207753e1.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2025-02-20</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;2025/02/20/话题/C++方向后端开发学习指南/&quot;);" href="javascript:void(0);" alt="">当前就业形势下C++方向后端开发学习指南</a><div class="blog-slider__text">在信息技术飞速发展的今天，后端开发成为了软件开发领域中极其重要的组成部分。对于很多程序员来说，C++仍然是一个强大且广泛应用的编程语言，尤其在后端开发中有着不可忽视的地位。本文将深入探讨C++方向后端开发的学习路线，分析当前就业形势下的职业方向选择，并结合图示和代码示例，帮助读者系统化地学习C++后端开发</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;2025/02/20/话题/C++方向后端开发学习指南/&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;2025/02/20/话题/AIGC训练效率/&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/419f4f95b11526f92f62fe38778d0a9.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2025-02-20</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;2025/02/20/话题/AIGC训练效率/&quot;);" href="javascript:void(0);" alt="">AIGC训练效率与模型优化的深入探讨</a><div class="blog-slider__text">人工智能领域的发展，人工智能生成内容（ [AIGC](https://aigc.izzi.cn/)）越来越受关注。AIGC能够通过学习大量数据生成高质量内容，但训练效率和模型优化仍然是关键的研究方向。本博客将深入探AIGC的训练效率，与模型优化的相关策略和技术，提供相应代码示例和图示，以帮助读者更好地理解该领域</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;2025/02/20/话题/AIGC训练效率/&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;2025/02/28/话题/如何高效利用DeepSeek/&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/e640e59c2f92482993b52c845adf7844.webp" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2025-02-28</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;2025/02/28/话题/如何高效利用DeepSeek/&quot;);" href="javascript:void(0);" alt="">如何高效利用DeepSeek：深入探索AI搜索引擎的潜力</a><div class="blog-slider__text">随着人工智能技术的飞速发展，传统的搜索引擎正逐步向更智能化、个性化的方向演进。作为一款基于深度学习的AI搜索引擎，DeepSeek（深度求索）不仅在理解用户意图方面展现出色，还通过集成丰富的知识图谱和提供多样化的信息类型，成为现代用户的信息获取利器。本文将详细分析如何高效利用DeepSeek，探讨其核心技术、实际应用场景以及性能优化方法</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;2025/02/28/话题/如何高效利用DeepSeek/&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;2025/01/31/话题/本地部署Deepseek/&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://picture-bed000.oss-cn-shenzhen.aliyuncs.com/2373381f0feae7cd4964af546e9e462.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2025-01-31</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;2025/01/31/话题/本地部署Deepseek/&quot;);" href="javascript:void(0);" alt="">如何快速高效本地部署DeepseekR1大模型？保姆级教程 无惧隐私威胁</a><div class="blog-slider__text">DeepSeek 隐私政策中提到了关于用户输入信息收集的条款，无论你输入什么文本，以及上传什么文件都会被第三方机构所收集，所以如果是在进行相关的项目研究或者实验进展分析的时候，就很有必要对数据进行隐私保护，且本地部署是支持离线的</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;2025/01/31/话题/本地部署Deepseek/&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>';
    console.log('已挂载butterfly_swiper')
    parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  var elist = 'undefined'.split(',');
  var cpage = location.pathname;
  var epage = '/';
  var flag = 0;

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_swiper_injector_config();
  }
  else if (epage === cpage){
    butterfly_swiper_injector_config();
  }
  </script><script defer src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js"></script><script defer data-pjax src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js"></script><script data-pjax src="https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.js"></script><script data-pjax>
  function gitcalendar_injector_config(){
      var parent_div_git = document.getElementById('gitZone');
      var item_html = '<div class="recent-post-item" id="gitcalendarBar" style="width:100%;height:auto;padding:10px;"><style>#git_container{min-height: 280px}@media screen and (max-width:650px) {#git_container{min-height: 0px}}</style><div id="git_loading" style="width:10%;height:100%;margin:0 auto;display: block;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animatetransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animatetransform></path></svg><style>#git_container{display: none;}</style></div><div id="git_container"></div></div>';
      parent_div_git.insertAdjacentHTML("afterbegin",item_html)
      console.log('已挂载gitcalendar')
      }

    if( document.getElementById('gitZone') && (location.pathname ==='/about/'|| '/about/' ==='all')){
        gitcalendar_injector_config()
        GitCalendarInit("https://gitcalendar.zzh-blog.club/api?ZeroCoder-Zhang",['#d9e0df', '#c6e0dc', '#a8dcd4', '#9adcd2', '#89ded1', '#77e0d0', '#5fdecb', '#47dcc6', '#39dcc3', '#1fdabe', '#00dab9'],'ZeroCoder-Zhang')
    }
  </script><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '2s');
    arr[i].setAttribute('data-wow-delay', '1s');
    arr[i].setAttribute('data-wow-offset', '100');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js"></script><script defer src="https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js"></script><!-- hexo injector body_end end --><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/koharu.model.json"},"display":{"position":"right","hOffset":40,"vOffset":0,"width":150,"height":300},"mobile":{"show":false},"log":false});</script></body></html>